<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛发帖</title>
		<link href="../csss.css" rel="stylesheet">
		<script type="text/javascript" src="jquery-3.4.1.min.js">
		</script>
		<script type="text/javascript">
			/*使用数组保存发帖者的头像
										使用函数floor( )和random( )随机获取发帖者的头像
										使用appendChild ( )把头像、标题、版块、时间插入到页面中
										设置value值为空来清空当前输入框中的内容
										使用style属性隐藏发新贴界面
										*/
			$(function() {
				$(".bbs header span").click(function() {
					$(".post").show();
				})
				$(".btn").click(function() {
					$(".post").hide();
					//2.置空输入值
					var str1 = $(".post input[class=title]").val('');
					var str2 = "所属板块：" + $("select").val('');
					var bigText = $(".content").val('');
					var day = new Date();
					var year = day.getFullYear();
					var mon = day.getMonth();
					var date = day.getDate();
					var hh = day.getHours();
					var mm = day.getMinutes();
					var str3 = "发表时间：" + year + "-" + mon + "-" + date + " " + hh + ":" + mm;
					var num = Math.floor(Math.random() * 4 + 1);
					var str4 = "../img/tou0" + num + ".jpg";

					var $li = $("<li><>")
					var $div = $("<div></div>")
					var $img = $("<img src=" + str4 + " />")
					$("ul").append($li);
					$li.append($div);
					$div.append($img);
					$h1 = $("<h1>" + str1 + "</h1>");
					$li.append($h1);
					$p = $("<p></p>");
					$span1 = $("<span>" + str2 + "</span>");
					$span2 = $("<span>" + str3 + "</span>");
					$p.append($span1);
					$p.append($span2);
					$li.append($p);
				});
			});
		</script>
	</head>

	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="../img/tou01.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="../img/tou02.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			<ction>

			<div class="post" id="post1">
				<input class="title" placeholder="请输入标题（1-50个字符）" /> 所属版块：
				<select id="choose">
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				<lect>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" />
			</div>
		</div>
	</body>

</html>